<template>
	<view class="page index">
		<!-- 头部搜索 -->
		<view class="i-header">
			<v-search content="夏季遮阳伞"></v-search>
		</view>
		<!-- 轮播图 -->
		<view class="i-banner">
			<swiper class="b-swiper"
				indicator-dots="true"
				indicator-active-color="#0080ff"
				autoplay="true"
				interval="3000"
				duration="500"
				circular="true">
				<swiper-item v-for="(item, index) in banners" :key="index">
					<view class="s-item">
						<image :src="item.pic" @tap="nav(item.jump_url)"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 活动部分 -->
		<!-- <view class="i-multi">
			<view class="m-box" v-for="(item, index) in multiBlock" :key="index">
				<view class="b-item" v-for="(itemc, indexc) in item.data" :key="indexc">
					<image :src="itemcc.pic" 
						v-for="(itemcc, indexcc) in itemc.child" :key="indexcc"
						@tap="nav(itemcc.url)">
					</image>
				</view>
			</view>
		</view> -->
		<!-- 商品列表部分 -->
		<view class="i-goods">
			<view class="g-tabs">
				<view class="t-item" :class="{'t-item-active': tabCurrentIndex === index}" 
					v-for="(item, index) in tabs" :key="index"
					@click="changeTab(index)">
					<text>{{item.title}}</text>
				</view>
			</view>
			<!--  -->
			<view class="g-content">
				<view class="c-box" v-for="(item, index) in goods" :key="index"
					@click="toDetailPage(item)">
					<image :src="item.pic_url" @tap="nav(item.goods_jump_url)"></image>
					<view class="b-wrap">
						<text class="w-tips">{{item.coupon_tips || '￥' + item.cprice}}</text>
						<view class="w-title">
							<text>{{item.title}}</text>
							<text>{{item.time_left}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 上拉加载 -->
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus"></uni-load-more>
			</view>
		</view>


	</view>
</template>

<script>
/* 自定义的组件 */
import vSearch from '../../components/v-search/v-search.vue'

/* api */
import {getIndexFirstPaintInfo,getIndexNavSkip} from '../../api/index.js'
import {getGoods, getBrandGoods} from '../../api/goods.js'
import { mapMutations } from 'vuex'
/* 缓存 */
import {setLocalStorage,getLocalStorage} from '../../api/util/storage.js'

export default {
	components: {
		vSearch
	},
	data() {
		return {
			// 轮播图数据
			banners: [],
			// 活动模块
			multiBlock: [],
			// tab标签
			tabs: [],
			// 当前选中的tab的索引
			tabCurrentIndex: 0,
			// 当前选中的tab的类型
			tabCurrentType: 'tab_hpzc',
			goods: [],
			loadStatus: 'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
			isLoadMore: false, //是否加载中
			page: 1
		}
	},
	created() {
		this._getIndexFirstPaintInfo()
		this._getGoods(this.page, this.tabCurrentType)
	},
	// 上拉触底函数，加载更多
	onReachBottom() { 
		if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
			this.isLoadMore = true
			/* this.page += 1
			this._getGoods(this.page, this.tabCurrentType) */
		}
	},
	methods: {
		_getIndexFirstPaintInfo() {
			// 先从本地缓存中获取数据，如果有则不进行数据请求，直接返回改值
			// 否则进行数据请求，缓存
			let cachData = getLocalStorage("indexFirstPaintInfo")
			if (cachData) {
				let slideAds = cachData.adsInfo.slide_ads
				this.banners = slideAds.config.slide

				this._getMultiBlock(cachData.adsInfo.block[0].multi_block)

				let childTab = cachData.menuInfo.app_menu.menulist[0].subtab[0].child_tab
				this._getTabs(childTab)
			} else {
				getIndexFirstPaintInfo().then(res => {
					setLocalStorage("indexFirstPaintInfo", res.data)
					this._getIndexFirstPaintInfo()
				})
			}
		},
		_getTabs(res) {
			this.tabs = res
		},
		changeTab(index) {
			this.tabCurrentIndex = index
			this.tabCurrentType = this.tabs[index].item
			this._getGoods(1, this.tabCurrentType)
		},
		_getMultiBlock(res) {
			let _multiBlock = JSON.parse(JSON.stringify(res))
			_multiBlock.splice(2, 2)
			//console.log(_multiBlock);
			this.multiBlock = _multiBlock
		},
		_getGoods(page, catname_flag) {
			let cachData = getLocalStorage("getGoods" + catname_flag)
			if (cachData) {
				// console.log(cachData);
				this.goods = cachData.data.goods
			} else {
				getGoods(page, catname_flag).then(res => {
					// console.log(res.data);
					setLocalStorage("getGoods" + catname_flag, res.data)
					this._getGoods(page, catname_flag)
				})
			}
		},
		// 前往专场详情页或者商品详情页
		toDetailPage(item) {
			// console.log(item);
			// 设置要打开的页面标题
			this.setBrandPageTitle(item.title)
			// 解析url地址，拼接获取参数 brand_id
			const myURL = new URL(item.goods_jump_url)
			const pathname = myURL.pathname
			let temp = pathname.replace(/\//g,',').split(',')
			// console.log(temp.pop() + ',' + myURL.pathname + ',' + myURL.search)
			const searchParams = new URLSearchParams(myURL.search)
			const param = searchParams.get('shop_id')
			const brand_id = temp.pop() + '_' + param
			let url = this.tabCurrentIndex == 0 ? 
					('../brand_detail/brand_detail?brand_id=' + brand_id):
					('../goods_detail/goods_detail')
			// 页面跳转
			uni.navigateTo({url: url})
		},
		...mapMutations({
			setBrandPageTitle: 'setNavigationBarTitle'
		})
	}
}
</script>

<style lang="less">
@import "./index";
</style>
